<template>
  <div class="my-dialog">
    <vxe-modal
      show-footer
      show-confirm-button
      show-cancel-button
      show-zoom
      title="图层管理"
      resize
      :lock-view="false"
      :mask="false"
      v-model="visible"
      :width="340"
      :height="400"
      @close="handleClose"
      size="small"
      :position="{
        top: 40,
        left: 15,
      }"
    >
      <el-tree
        ref="layerTree"
        :data="layerTree"
        show-checkbox
        node-key="id"
        :props="defaultProps"
        @check="handleCheck"
      >
      </el-tree>
    </vxe-modal>
  </div>
</template>

<script>
export default {
  name: "LayerManage",
  data() {
    return {
      visible: false,
      layerTree: [
        {
          id: "1",
          label: "影像地图",
          children: [
            {
              id: "1-1",
              label: "底图",
              layer: null,
            },
          ],
        },
        {
          id: "2",
          label: "底图",
          children: [
            {
              id: "2-1",
              label: "单张底图",
              layer: null,
            }
          ]
        }
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  mounted() {
    this.initCesium();
  },
  methods: {
    open() {
      this.visible = true;
    },
    handleClose() {
      this.visible = false;
      this.$emit("menuClose", "layerManageRef");
    },
    initCesium() {
      // 添加自定义图层
      const customLayer = new Cesium.UrlTemplateImageryProvider({
        url: "/map/{z}/{x}/{reverseY}.jpg",
        tilingScheme: new Cesium.GeographicTilingScheme(),
        maximumLevel: 7,
      });
      const layer = window.viewer.imageryLayers.addImageryProvider(customLayer);

      // 添加单张底图
      const singleImageLayer = new Cesium.SingleTileImageryProvider({
        url: require("@/assets/images/baseMap/world.jpg"),  // 这里需要替换为你的单张图片地址
      });
      const singleLayer = window.viewer.imageryLayers.addImageryProvider(singleImageLayer);
      singleLayer.show = false;  // 默认隐藏

      // 保存图层引用到树节点
      this.layerTree[0].children[0].layer = layer;
      this.layerTree[1].children[0].layer = singleLayer;
    },
    //勾选按钮
    handleCheck(data, checked) {
      console.log(data);
      console.log(checked);
      const { checkedKeys } = checked;
      const layer = data.layer;
      const currentId = data.id;
      const groupId = currentId.split('-')[0];

      if (layer) {
        layer.show = checkedKeys.includes(currentId);
        if (checkedKeys.includes(currentId)) {
          this.cancelOtherGroupsSelection(groupId);
        }
      } else {
        this.handleParentCheck(data, checkedKeys.includes(currentId));
        if (checkedKeys.includes(currentId)) {
          this.cancelOtherGroupsSelection(groupId);
        }
      }
    },
    // 处理父节点选中状态
    handleParentCheck(parentNode, checked) {
      const processChildren = (node, isChecked) => {
        if (node.children) {
          node.children.forEach((child) => {
            if (child.layer) {
              child.layer.show = isChecked;
            }
            processChildren(child, isChecked);
          });
        }
      };
      processChildren(parentNode, checked);
    },
    // 取消其他组的选中状态
    cancelOtherGroupsSelection(currentGroupId) {
      this.layerTree.forEach(group => {
        const groupId = group.id;
        if (groupId !== currentGroupId) {
          this.cancelGroupSelection(group);
        }
      });

      // 更新树的选中状态
      this.$nextTick(() => {
        const tree = this.$refs.layerTree;
        const checkedKeys = tree.getCheckedKeys();
        const currentGroupKeys = checkedKeys.filter(key => key.startsWith(currentGroupId));
        tree.setCheckedKeys(currentGroupKeys);
      });
    },
    // 取消指定组的所有选中状态
    cancelGroupSelection(group) {
      if (group.children) {
        group.children.forEach(child => {
          if (child.layer) {
            child.layer.show = false;
          }
          // 递归处理子节点
          if (child.children) {
            this.cancelGroupSelection(child);
          }
        });
      }
    },
  },
};
</script>

<style scoped lang="scss">
.my-dialog {
  .el-tree {
    padding: 10px;
  }
}
</style>
